<template>
  <view class="customNavBar">
    <view class="navbar">
      <!-- 状态栏 标题栏 合一页面头部-->
      <!-- 状态栏 时间 电量 胶囊-->
      <view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
      <!-- 标题栏 -->
      <view :style="{ height: getTitleBarHeight() + 'px' }" class="titleBar">
        <i class="iconfont icon-zuojiantou" @tap="navBack"></i>
        <view class="title"></view>
        <image
          src="@/static/icon/auditDetailsSVG/general-subscribe-add.svg"
          style="width: 32rpx; height: 32rpx"
        ></image>
        <image
          src="@/static/icon/auditDetailsSVG/pdf.svg"
          style="width: 32rpx; height: 32rpx; margin-left: 32rpx"
        ></image>
        <image
          src="@/static/icon/auditDetailsSVG/close.svg"
          style="width: 32rpx; height: 32rpx; margin-left: 32rpx"
          @click="handleClick3"
        ></image>
      </view>
    </view>
    <!-- 填充区域 -->
    <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
  </view>
</template>

<script setup>
import { defineEmits, defineProps } from 'vue'
// 引入自定义头部导航栏相关信息
import { getNavBarHeight, getStatusBarHeight, getTitleBarHeight } from '@/utils/system.js'

const handleClick3 = () => {
  uni.switchTab({
    url: '/pages/work/index',
  })
}

const emit = defineEmits('rightIcon')

const props = defineProps({})
const navBack = () => {
  uni.navigateBack()
}

const rightIcon = () => {
  emit('rightIcon')
}
</script>

<style lang="scss" scoped>
@import '../../static/style/variables.scss';
@import '../../static/style/common.scss';

.customNavBar {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: $z-index;
    background: #e79d46;
    box-sizing: border-box;

    color: #ffffff;

    .titleBar {
      padding: 0 $edition-pg;
      display: flex;
      align-items: center;

      .title {
        flex-grow: 1;
      }
    }
  }
}
</style>
